<template>
	<!-- 被举报 -->
	<view>
		<view class="item-title">举报理由</view>
		<view class="item-content">{{detail.set_name}}</view>
		<view class="item-title">被举报内容</view>
		<!-- 输入框/上传头像模块 -->
		<view class="item-tarea_content">
			<textarea class="cont" placeholder-style="color:#CCCCCC" :value="detail.content" maxlength="200" disabled></textarea>
			<view class="imgs">
				<view class="imgItem" v-for="(item,index) in detail.visit_path" :key="index" @tap="previewImage(index,1)">
					<image :src="item"></image>
				</view>
			</view>
		</view>
		
		<view class="item-dealtime">
			<view>举报处理时间：<text>{{detail.time}}</text></view>
			<view class="item-dealtime-explan" @tap='onExplain'><text>申诉说明<text class="what">?</text></text></view>
		</view>
		
		<!-- 申诉失败/成功，只有一种状态显示 -->
		<view class="item-dealresult">
			<view v-if="is_appeal == 1 || is_appeal == 3">
				<view class="item-dealresult-succeed">申诉提交成功！</view>
				<view class="explain"><text>申诉内容：</text>{{Success.content}} {{Success.time}}</view>
				<view v-if="Success.visit_path > 0" class="imgs1">
					<view class="imgItem" v-for="(item,index) in Success.visit_path" :key="index" @tap="previewImage(index,2)">
						<image :src="item"></image>
					</view>
				</view>
			</view>
			
			<!-- 底部消息  	申诉结果处理后就需要隐藏 -->
			<view v-if="is_appeal == 1 || is_appeal == 3" class="item-bottom_content">已有处理结果后，超过48小时未提交新的反馈，将默认认可处理结果</view>
			
			<view v-if="is_appeal == 3 && result.is_succeed == 1">
				<view class="item-dealresult-lose">申诉失败！</view>
				<view class="explain"><text>失败原因：</text>{{result.content}} {{result.time}}</view>
			</view>
		</view>
		
		<!-- 提交模块 -->
		<view class="sublitm-wrap" @tap="submit">
			<view class="item-submit" :class="[is_appeal == 1 ? 'item-submit-active' : '']">{{stateCont}}</view>
		</view>
		
		<!-- 申请说明弹窗 -->
		<v-explain-prop v-if="isshow_explain" @onExplain='onExplain'></v-explain-prop>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import explian_prop from './Components/Base-explain-prop'
	export default {
		components: {
			vExplainProp: explian_prop,
		},
		data() {
			return {
				isshow_explain: false, // 控制显示/隐藏说明弹窗
				article_id: '',
				type: '', //1文章 2视频
				detail: {}, //举报内容
				is_appeal: 0 ,//1申诉，2成功，3失败
				Success: {}, //申诉提交成功的内容
				result: {} ,//申诉结果的内容
				stateCont: '申诉'
			}
		},
		onShow() {
			this.getState();
		},
		onLoad(e) {
			this.article_id = e.article_id;
			this.type = e.type;
			this.getDetail();
		},
		methods: {
			/* 获取文章违规详情 */
			getDetail() {
				var url = '';
				var data = {}
				if(this.type == 1) {
					url = 'user/wisdom.Users/punishLog';
					data.article_id = this.article_id;
				} else if (this.type == 2) {
					url = 'user/video.Lists/punishLog';
					data.video_id = this.article_id;
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						this.detail = res.data.data;
						this.detail.time = util.getBriefTime(this.detail.update_time);
					} else {
						this.detail = {};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/* 获取 文章 & 作品 状态*/
			getState() {
				var url = '';
				var data = {}
				if(this.type == 1) {
					url = 'user/wisdom.Lists/articleList';
					data.is_user = 1;
					data.article_id = this.article_id;
				} else if (this.type == 2) {
					url = 'user/video.Lists/VideoListByOne';
					data.video_id = this.article_id;
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						this.is_appeal = res.data.data.data[0].is_appeal;
						if(this.is_appeal == 1) {
							this.getSubmit();
						} else if (this.is_appeal == 3) {
							this.getSubmit();
							this.getResult();
							this.stateCont = '重新申诉';
						}
					} else {
						this.is_appeal = '';
					}
				})
			},
			/* 获取申诉内容 */
			getSubmit() {
				var url = '';
				var data = {}
				if(this.type == 1) {
					url = 'user/wisdom.Users/appealList';
					data.article_id = this.article_id;
				} else if (this.type == 2) {
					url = 'user/video.Lists/appealList';
					data.video_id = this.article_id;
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						this.Success = res.data.data;
						this.Success.time = util.getBriefTime(this.Success.creat_time);
					} else {
						this.Success = {};
					}
				})
			},
			/* 获取申诉结果 */
			getResult() {
				var url = '';
				var data = {}
				if(this.type == 1) {
					url = 'user/wisdom.Users/appealresult';
					data.article_id = this.article_id;
				} else if (this.type == 2) {
					url = 'user/video.Lists/appealresult';
					data.video_id = this.article_id;
				}
				this.$zapi.apiPost(url,data).then(res=>{
					if(res.data.code == 200) {
						this.result = res.data.data;
						this.result.time = util.getBriefTime(this.result.creat_time);
					} else {
						this.result = {};
					}
				})
			},
			// 显示说明弹窗
			onExplain(isshow_explain = true) {
				this.isshow_explain = isshow_explain
			},
			/* 预览图片 */
			previewImage: function(index,type) {
				var current = index;
				if(type == 1) {
					uni.previewImage({
						current: current,
						urls: this.detail.visit_path
					})
				} else {
					uni.previewImage({
						current: current,
						urls: this.Success.visit_path
					})
				}
			},
			/* 申诉 */
			submit(){
				if(this.is_appeal != 1) {
					uni.navigateTo({
						url: 'appeal?article_id='+this.article_id+'&type='+this.type
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}
	.item-title,.item-dealtime{
		padding: 20upx 30upx;
		color: #999999;
		font-size: 30upx;
	}
	// 举报理由
	.item-content{
		padding: 30upx;
		color: #333333;
		background: #FFFFFF;
	}
	
	/* 举报内容 */
	.item-tarea_content{
		background: #fff;
	}
	.cont {
		color: #333333;
		font-size: 34upx;
		width: calc(100% - 60upx);
		background-color: #FFFFFF;
		padding: 30upx;
	}
	
	.imgs {
		padding: 30upx;
		width: calc(100% - 60upx);
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.imgs1{
		padding: 30upx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.imgItem,
	.imgItem image {
		width: 120upx;
		height: 120upx;
		margin-right: 20upx;
		border-radius: 8upx;
	}
	
	.iconjujue {
		color: #FF5A3E;
		position: relative;
		top: -160upx;
		left: 100upx;
	}
	
	.clickItem {
		width: 120upx;
		height: 120upx;
		border: 1upx solid #F6F6F6;
		text-align: center;
		background: #F6F6F6;
		color: #CCCCCC;
		line-height: 1.5;
		border-radius: 8upx;
	}
	
	// 举报处理时间
	.item-dealtime{
		display: flex;
		justify-content: space-between;
		.item-dealtime-explan{
			color: #FFB800;
			.what{
				margin-left: 8upx;
				padding: 0 12upx;
				border-radius: 50%;
				border: 2upx solid;
			}
		}
	}
	// 举报结果
	.item-dealresult{
		padding: 30upx 30upx 180upx;
		
		// 申诉提交成功
		.item-dealresult-succeed {
			color: #FF9900;
			font-size: 30upx;
		}
		// 申诉失败
		.item-dealresult-lose {
			color: #FFB800;
			font-size: 30upx;
		}
		.item-dealresult-lose + view,
		.item-dealresult-succeed + view{
			color: #666666;
			font-size: 30upx;
		}
		.explain{
			color: #666666;
			font-size: 30upx;
			display: flex;
			justify-content: flex-start;
			// align-items: center;
			& text{
				white-space: nowrap;
			}
		}
		.item-bottom_content{
			padding: 20upx 0;
			color: #999999;
			font-size: 30upx;
		}
	}
	
	/* 提交模块 */
	.sublitm-wrap {
		position: fixed;
		padding: 20upx;
		bottom: 0;
		left: 0;
		right: 0;
		background: #F6F6F6;
	}
	
	.item-submit {
		padding: 10upx 0;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		border-radius: 40upx;
		background: #FF9900;
	}
	.item-submit-active{
		opacity: 0.5;
	}
</style>
